---
title: Пользовательские аватары
description: Настройка пользовательского аватара приложения
---

# Пользовательские аватары

## Настройка пользовательского аватара приложения

По умолчанию мы предоставляем аватар для пользователей, если их изображение ENS не установлено, но вы можете настроить его, предоставив свой собственный компонент аватара. Вы можете импортировать тип `AvatarComponent`, если используете TypeScript:

```tsx
import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

Переданный в проп `avatar` `AvatarComponent` имеет следующие типы пропов: `<{ address: string; ensImage?: string | null; size: number;}>`
